<style>
    .welcome{overflow: hidden; }
    .welcome .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
    .welcome .icon {margin-right:10px;color:#1aa094;}
    .welcome .icon-cray {color:#ffb800 !important;}
    .welcome .icon-blue {color:#1e9fff !important;}
    .welcome .icon-tip {color:#ff5722 !important;}
    .welcome .layuimini-qiuck-module {text-align:center;margin-top:10px}
    .welcome .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
    .welcome .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
    .welcome .welcome-module {width:100%;height:210px;}
    .welcome .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
    .welcome .panel-body {padding:10px}
    .welcome .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
    .welcome .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top:.3em;}
    .welcome .layui-red {color:red}
    .welcome .main_btn > p {height:40px;}
    .welcome .layui-bg-number {background-color:#F8F8F8;}
    .welcome .layuimini-notice:hover {background:#f6f6f6;}
    .welcome .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
    .welcome .layuimini-notice-title,.layuimini-notice-label {padding-right:70px !important;text-overflow:ellipsis !important;overflow:hidden !important;white-space:nowrap !important;}
    .welcome .layuimini-notice-title {line-height:28px;font-size:14px;}
    .welcome .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}

    .table-padding {
        border-collapse: collapse;
        width: 400px;
        height: 100px;
    }
    .table-padding th,
    .table-padding td {
        width: 200px;
        /*border: 1px solid black;*/
        padding: 10px;
    }

</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main welcome">
        <div class="layui-col-md8 layui-col-space10">
            <div class="layui-col-md12">
                <div class="layui-row layui-col-space15">
                    <!-- <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-warning icon"></i>数据统计</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space10">
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-blue">实时</span>
                                                        <h5>Pv</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-marginsPv">1234</h1>
                                                        <small>当前分类总记录数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-cyan">实时</span>
                                                        <h5>Uv</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-marginsUv">1234</h1>
                                                        <small>当前分类总记录数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-green">实时</span>
                                                        <h5>Ip</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-marginsIp">1234</h1>
                                                        <small>当前分类总记录数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> -->
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-warning icon"></i>今日流量</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space10">
                                        <table style="text-align: center" class="table-padding">
                                            <thead>
                                            <tr>
                                                <th></th>
                                                <th>浏览量(PV)</th>
                                                <th>访客数(UV)</th>
                                                <th>IP数</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>今日</td>
                                                <td id="todayPv">0</td>
                                                <td id="todayUv">0</td>
                                                <td id="todayIp">0</td>
                                            </tr>
                                            <tr>
                                                <td>昨日</td>
                                                <td id="preDayPv">0</td>
                                                <td id="preDayUv">0</td>
                                                <td id="preDayIp">0</td>
                                            </tr>
                                            </tbody>
                                        </table>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>报表统计</div>
                            <div class="layui-card-body">
                                <div id="echarts-records" style="width: 100%;min-height:500px"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4" >
            <div class="layui-card">
                <div class="layui-card-header"><i class="fa fa-warning icon"></i>top10搜索词</div>
                <div class="layui-card-body" style="height: 500px;">
                    <div class="welcome-module">
                        <div class="layui-row layui-col-space10">
                            <table id="top10serchWordTB" lay-filter="top10serchWordFilter"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>



    //报表全局参数
    //pv uv ip的y轴数组
    var pvYArr=[];
    var uvYArr=[];
    var ipYArr=[];
    //x轴数组
    var allXArr=[];


    //form表单
    layui.form.render();
    //初始化table
    var form = layui.form,
        laydate = layui.laydate,
        table = layui.table,
        //top10搜索词
        cols = [
            { align: 'center', title: '序号', type: 'numbers', width: '15%' },
            { field: 'searchWord', title: '搜索词', width: '55%' },
            { field: 'searchNum', title: '浏览量',  width: '25%' }
        ];

    layuiEx.tableRender('/webSite/top10SearchWord', 'top10serchWordTB', '', cols, { });


    layui.use(['layer','echarts'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            echarts = layui.echarts;




        /**
         * 报表功能
         */
        var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
        var optionRecords = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['浏览量(pv)', '访客数(uv)', 'ip数']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '浏览量(pv)',
                    type: 'line',
                    data: []
                },
                {
                    name: '访客数(uv)',
                    type: 'line',
                    // data: [220, 182, 191, 234, 290, 330, 310]
                    data: []
                },
                {
                    name: 'ip数',
                    type: 'line',
                    data: []
                }
            ]
        };

        //找到x轴的时间
        // var myDate=new Date();
        // var pre6Daate= myDate.getFullYear()+"-" +(myDate.getMonth()+1)+"-"+(myDate.getDate()-6);
        // var pre5Daate= myDate.getFullYear()+"-" +(myDate.getMonth()+1)+"-"+(myDate.getDate()-5);
        // var pre4Daate= myDate.getFullYear()+"-" +(myDate.getMonth()+1)+"-"+(myDate.getDate()-4);
        // var pre3Daate= myDate.getFullYear()+"-" +(myDate.getMonth()+1)+"-"+(myDate.getDate()-3);
        // var pre2Daate= myDate.getFullYear()+"-" +(myDate.getMonth()+1)+"-"+(myDate.getDate()-2);
        // var preDaate= myDate.getFullYear()+"-" +(myDate.getMonth()+1)+"-"+(myDate.getDate()-1);
        // var nowDaate= myDate.getFullYear()+"-" +(myDate.getMonth()+1)+"-"+myDate.getDate();
        //展示今日流量和昨日流量
        getNumByDate(getTime(-0),"nowDay");
        getNumByDate(getTime(-1),"preDay");
        //获取总数量
        // getTotal();

        //调用获取报表功能
        reportForm(getTime(-6));
        reportForm(getTime(-5));
        reportForm(getTime(-4));
        reportForm(getTime(-3));
        reportForm(getTime(-2));
        reportForm(getTime(-1));
        reportForm(getTime(-0));

        //报表参数渲染
        reportFormRender();


        //调用报表渲染 
        function reportFormRender(){
            //渲染报表y轴
            var yArr= optionRecords.series;
            for(var i=0;i<yArr.length;i++){
                if(yArr[i].name=="浏览量(pv)" ){ yArr[i].data=pvYArr;}
                if(yArr[i].name=="访客数(uv)" ){ yArr[i].data=uvYArr;}
                if(yArr[i].name=="ip数" ){ yArr[i].data=ipYArr;}
            }
            //渲染报表x轴
            optionRecords.xAxis.data=allXArr;

            echartsRecords.setOption(optionRecords);
        }
        function  getTime(diff) {
            var nowdate = new Date()
            if (diff) {
                nowdate.setDate(nowdate.getDate() + diff)
            }
            var year = nowdate.getFullYear()
            var month = nowdate.getMonth() + 1 < 10 ? '0' + (nowdate.getMonth() + 1) : nowdate.getMonth() + 1
            var day = nowdate.getDate() < 10 ? '0' + nowdate.getDate() : nowdate.getDate()
            return year+"-" + month+"-" + day
        }


        //报表统计
        function reportForm(date){
            shared.ajaxGetSync('/webSite/reportForm', { date: date }, function (result) {
                var pvArr=result.pv;
                var uvArr=result.uv;
                var ipArr=result.ip;
                pvArr.length ==0 ? pvYArr.push(0) : pvYArr.push(pvArr[0].num) ;
                uvArr.length ==0 ? uvYArr.push(0) : uvYArr.push(uvArr[0].num);
                ipArr.length ==0 ? ipYArr.push(0) : ipYArr.push(ipArr[0].num);
                allXArr.push(date);
            })

            // $.ajax({
            //     type: 'get',
            //     async: false,
            //     url: config.server+'/webSite/reportForm',
            //     dataType: "json",
            //     data:{
            //         date: date
            //     },
            //     success: function (res) {
            //         var result=res.data;
            //         var pvArr=result.pv;
            //         var uvArr=result.uv;
            //         var ipArr=result.ip;
            //         pvArr.length ==0 ? pvYArr.push(0) : pvYArr.push(pvArr[0].num) ;
            //         uvArr.length ==0 ? uvYArr.push(0) : uvYArr.push(uvArr[0].num);
            //         ipArr.length ==0 ? ipYArr.push(0) : ipYArr.push(ipArr[0].num);
            //         allXArr.push(date);
            //     }
            // })
        }


        //展示今日流量
        function getNumByDate(dateParam,flag){
            shared.ajaxGet('/webSite/findWebSiteByDate', { date: dateParam }, function (result) {
                if(flag=="nowDay"){
                    for(var i=0;i<result.length;i++){
                        if(result[i].type=="pv"){
                            $("#todayPv").html( result[i].num);
                        }
                        if(result[i].type=="uv"){
                            $("#todayUv").html(result[i].num);
                        }
                        if(result[i].type=="ip"){
                            $("#todayIp").html( result[i].num);
                        }
                    }

                }
                if(flag=="preDay"){
                    for(var i=0;i<result.length;i++){
                        if(result[i].type=="pv"){
                            $("#preDayPv").html( result[i].num);
                        }
                        if(result[i].type=="uv"){
                            $("#preDayUv").html(result[i].num);
                        }
                        if(result[i].type=="ip"){
                            $("#preDayIp").html( result[i].num);
                        }
                    }

                }
            })

            // $.ajax({
            //     type: 'get',
            //     url: config.server + '/webSite/findWebSiteByDate',
            //     dataType: "json",
            //     data:{
            //         date: dateParam
            //     },
            //     success: function (res) {
            //         var result=res.data;
            //         if(flag=="nowDay"){
            //             for(var i=0;i<result.length;i++){
            //                 if(result[i].type=="pv"){
            //                     $("#todayPv").html( result[i].num);
            //                 }
            //                 if(result[i].type=="uv"){
            //                     $("#todayUv").html(result[i].num);
            //                 }
            //                 if(result[i].type=="ip"){
            //                     $("#todayIp").html( result[i].num);
            //                 }
            //             }
            //
            //         }
            //         if(flag=="preDay"){
            //             for(var i=0;i<result.length;i++){
            //                 if(result[i].type=="pv"){
            //                     $("#preDayPv").html( result[i].num);
            //                 }
            //                 if(result[i].type=="uv"){
            //                     $("#preDayUv").html(result[i].num);
            //                 }
            //                 if(result[i].type=="ip"){
            //                     $("#preDayIp").html( result[i].num);
            //                 }
            //             }
            //
            //         }
            //     }
            // })
        }

        function getTotal(){
            shared.ajaxGet('/webSite/numStatistics', null, function (result) {
                for(var i=0;i<result.length;i++){
                    var type= result[i].type;
                    if(type=='pv'){
                        $(".no-marginsPv").html( result[i].pvTotalNum)
                    }else if(type=='uv'){
                        $(".no-marginsUv").html( result[i].uvTotalNum)
                    }else if(type=='ip'){
                        $(".no-marginsIp").html( result[i].ipTotalNum)
                    }
                }
            })

            // $.ajax({
            //     type: 'get',
            //     url: config.server+'/webSite/numStatistics',
            //     dataType: "json",
            //     success: function (data) {//res为相应体,function为回调函数
            //         var result=data.data;
            //         for(var i=0;i<result.length;i++){
            //             var type= result[i].type;
            //             if(type=='pv'){
            //                 $(".no-marginsPv").html( result[i].pvTotalNum)
            //             }else if(type=='uv'){
            //                 $(".no-marginsUv").html( result[i].uvTotalNum)
            //             }else if(type=='ip'){
            //                 $(".no-marginsIp").html( result[i].ipTotalNum)
            //             }
            //         }
            //     }
            // })
        }
        // echarts 窗口缩放自适应
        window.onresize = function () {
            echartsRecords.resize();
        }

    });
</script>
